<template>
  <div class="box">
    <div class="class_mid">
    <van-nav-bar
      title="考卷"
      left-text="返回"
      left-arrow
      @click-left="$router.go(-1)"
      style="width:100%"
    />
    </div>
    <van-tabs v-model="active" class="two">
      <van-tab title="我的考卷" @click="xx">
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <van-list
            v-model="newloading"
            :finished="newfinished"
            finished-text="没有更多了"
            @load="newonLoad">
        <div class="bao">
            <van-dropdown-menu active-color="#1989fa" class="xiala">
              <van-dropdown-item v-model="valuenumber" :options="optnumber" @change="changenumber(valuenumber)"/>
            </van-dropdown-menu>
            <van-search v-model="newvalue" placeholder="请输入搜索关键词" @blur="alerday"/>
        </div>
        <van-grid  class="abuy">
          <van-grid-item class="da" v-for="(item,index) in exemList" :key="index" @click="nextExemDetail(item.id)">
            <div slot="default" class="gong">
              <div slot="icon" class="gong_tu">
                <img :src="'http://upenglish.ayvvv.cn'+item.testpaperimage" alt="">
              </div>
              <div slot="text" class="gong_zi">
                <span style="display:block">{{ item.testpapername }}</span>
                <span slot="title" class="time">{{ item.createtime | dateFormat }}</span>
              </div>
            </div>
          </van-grid-item>
        </van-grid>
          </van-list>
          </van-pull-refresh>
      </van-tab>
      <van-tab title="全部考卷">
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad">
          <div class="bao">
          <van-dropdown-menu active-color="#1989fa" class="xiala">
              <van-dropdown-item v-model="value1" :options="option1"  @change="change(value1)"/>
          </van-dropdown-menu>
          <van-search class="search"   v-model="value" placeholder="请输入搜索关键词" @blur="getExem" />
          <van-button   class="morebuy" plain type="info" @click="appear">批量购买</van-button>
          </div>
        <van-grid class="abuy">
          <van-grid-item class="da" v-for="(item,inde) in allexemList" :key="inde">
            <div slot="default" class="gong">
              <div slot="icon" class="gong_tu">
                <img :src="'http://upenglish.ayvvv.cn'+item.testpaperimage" alt="" @click="bugExem(item.id,item.price)">
              </div>
              <div>
                <span class="zhong">{{ item.testpapername }}</span>
                  <div class="doller">
                  <van-checkbox icon-size='12px' v-if="isappear" v-model="checked[inde]" checked-color="#ee0a24" class="buysell" @click="buybuy(item.id,inde,item.price)"></van-checkbox>
                  <span  class="price">￥{{ item.price }}</span>
                </div>
                  <div class="time">{{ item.createtime | dateFormat }}</div>
              </div>
                <!-- <div    class="time"></div> -->
            </div>
          </van-grid-item>
        </van-grid>
          </van-list>
        </van-pull-refresh>
        <!-- <van-pagination
          v-model="currentPage"
          :total-items="detailList.total"
          :show-page-size="detailList.last_page"
          force-ellipses
          v-show="isshow"
        /> -->
      </van-tab>
    </van-tabs>
  <!-- <div class="atonce" v-show = "onceshow"><van-button type="info" @click="richbuy">立即购买</van-button></div> -->
  <div class="atonce" v-show = "onceshow"><img class="ddimg" @click="richbuy" src="~@/assets/dd.png" alt=""></div>
  </div>
</template>

<script>
import { allExem, bugexem, buyExemed } from '@/api/question.js'
import { allgrade } from '@/api/class.js'
import { mapState } from 'vuex'
import { Toast } from 'vant'
export default {
  inject: ['reload'],
  name: 'CompanyConfigure',
  data () {
    return {
      value1: 0,
      isshow: true,
      active: 2,
      exemList: [],
      allexemList: [],
      currentPage: 1,
      detailList: [],
      list: [],
      value: '',
      newvalue: '',
      isLoading: false,
      count: 1,
      newloading: false,
      newfinished: false,
      loading: false,
      finished: false,
      option1: [
        // { text: '一年级', value: 1 },
        // { text: '二年级', value: 2 },
        // { text: '三年级', value: 3 },
        // { text: '四年级', value: 4 },
        // { text: '五年级', value: 5 },
        // { text: '六年级', value: 6 }
      ],
      grade: '',
      page: 1,
      newpage: 1,
      checked: [],
      moreclass: [],
      allprice: [],
      isappear: false,
      onceshow: false,
      select: '',
      newlist: [],
      loadList: [],
      valuenumber: 0,
      optnumber: [
        { text: '选择时间查询', value: 0 },
        { text: '购买时间查询', value: 1 },
        { text: '创建时间查询', value: 2 }
      ],
      onetype: 1,
      buyprice: 0,
      searchpage: 1,
      newloadList: [],
      boughtlist: [],
      boughtpage: 1
    }
  },
  watch: {
    moreclass: {
      handler (a, b) {
        if (b.length >= 2) {
          // console.log(b.length)
          this.onceshow = true
        } else if (b.length < 2) {
          this.onceshow = false
        }
      },
      deep: true // 必须加这个属性
    }
  },

  created () {
    if (this.user) {
      // this.getExem()
      // this.getBuyExemed()
      this.getallgrade()
      // this.gradeclass()
    }
  },
  computed: {
    ...mapState(['user', 'id'])
  },
  methods: {
    xx () {
      alert('11')
    },
    // 改变年级
    change (val) {
      if (val !== 0) {
        this.grade = val
        this.gradeclass()
      } else {
        this.grade = ''
        this.gradeclass()
      }
    },
    async gradeclass (name) {
      this.$toast.loading({
        message: '获取中...',
        forbidClick: true,
        duration: 0

      })
      this.newloadList = []
      this.allexemList = []
      this.searchpage = 1
      // const data = await allExem({
      //   userid: this.id,
      //   page: this.page,
      //   ordertype: this.onetype,
      //   testpapername: this.value,
      //   grade: this.grade
      // })
      // this.loadList.push(...data.data.alltestpaper.data)
      // this.allexemList = [...new Set(this.loadList)]
      // this.loading = false
      // if (this.page < data.data.alltestpaper.last_page) {
      //   this.page++
      //   this.onLoad()
      // }
      // if (this.allexemList.length >= data.data.alltestpaper.total) {
      //   this.finished = true
      // }
      // this.$toast.clear()
      this.xxx()
    },
    async alerday () {
      this.$toast.loading({
        message: '获取中...',
        forbidClick: true,
        duration: 0
      })
      // const data = await alerdaytest({
      //   userid: this.id,
      //   testpapername: this.newvalue
      // })
      // this.exemList = data.data.allbuytestpaper.data
      this.boughtlist = []
      this.exemList = []
      this.boughtpage = 1
      // const data = await buyExemed({
      //   userid: this.id,
      //   page: this.newpage,
      //   ordertype: this.onetype,
      //   testpapername: this.newvalue
      // })
      // this.newlist.push(...data.data.allbuytestpaper.data)
      // this.exemList = [...new Set(this.newlist)]
      // console.log(this.exemList)
      // this.newloading = false
      // if (this.newpage < data.data.allbuytestpaper.last_page) {
      //   this.newpage++
      //   this.newonLoad()
      // }
      // if (this.exemList.length >= data.data.allbuytestpaper.total) {
      //   this.newfinished = true
      // }
      // this.$toast.clear()
      this.yyy()
    },
    onRefresh () {
      setTimeout(() => {
        Toast('加载完成')
        this.isLoading = false
        this.count++
      }, 1000)
    },
    // 全部试卷得搜索框
    async getExem () {
      this.$toast.loading({
        message: '获取中...',
        forbidClick: true,
        duration: 0
      })
      this.newloadList = []
      this.allexemList = []
      this.searchpage = 1
      this.xxx()
      // const data = await allExem({
      //   userid: this.id,
      //   page: this.page,
      //   ordertype: this.onetype,
      //   testpapername: this.value,
      //   grade: this.grade
      // })
      // this.loadList.push(...data.data.alltestpaper.data)
      // this.allexemList = [...new Set(this.loadList)]
      // this.loading = false
      // if (this.page < data.data.alltestpaper.last_page) {
      //   this.page++
      //   this.onLoad()
      // }
      // if (this.allexemList.length >= data.data.alltestpaper.total) {
      //   this.finished = true
      // }
      // this.$toast.clear()
    },
    bugExem (id, i) {
      this.$dialog.confirm({
        message: '是否要购买此题'
      }).then(async () => {
        const { data } = await bugexem({
          userid: this.id,
          testpaperid: id,
          gobuyprice: i
        })
        if (data.code === 200) {
          this.$toast.success('购买成功')
          this.reload()
        } else if (data.code === 203) {
          this.$toast.fail('此题已被购买')
        } else {
          this.$toast.fail('网络出错了, 请重新购买')
        }
      }).catch(() => {
      })
    },
    async getBuyExemed () {
      const { data } = await buyExemed({
        userid: this.id,
        page: this.page
      })
      this.exemList = data.allbuytestpaper.data
    },
    nextExemDetail (id) {
      this.$router.push({ path: `/exemDetail/${id}` })
    },
    async  onLoad () {
      const data = await allExem({
        userid: this.id,
        page: this.page,
        ordertype: this.onetype,
        testpapername: this.value,
        grade: this.grade
      })
      this.loadList.push(...data.data.alltestpaper.data)
      // console.log(data.data.alltestpaper)
      this.allexemList = [...new Set(this.loadList)]
      this.loading = false
      if (this.page < data.data.alltestpaper.last_page) {
        this.page = this.page + 1
      }
      if (this.allexemList.length >= data.data.alltestpaper.total) {
        this.finished = true
      }
    },
    async  newonLoad () {
      const data = await buyExemed({
        userid: this.id,
        page: this.newpage,
        ordertype: this.onetype,
        comboname: this.newvalue
      })
      this.newlist.push(...data.data.allbuytestpaper.data)
      this.exemList = [...new Set(this.newlist)]
      console.log(data.data.allbuytestpaper)
      this.newloading = false
      if (this.newpage < data.data.allbuytestpaper.last_page) {
        this.newpage++
      }
      if (this.exemList.length >= data.data.allbuytestpaper.total) {
        this.newfinished = true
      }
    },
    async getallgrade () {
      const data = await allgrade()
      this.option1 = data.data.result
      this.option1.push({ text: '全部年级', value: 0 })
    },
    buybuy (i, j, p) {
      if (this.checked[j] === true) {
        this.moreclass.push(i)
        this.allprice.push(p)
      } else if (this.checked[j] === false) {
        var ind = this.moreclass.indexOf(i)
        this.moreclass.splice(ind, 1)
        this.allprice.splice(ind, 1)
      }
      this.select = this.moreclass
      // console.log(this.moreclass, '买')
    },
    richbuy () {
      for (var a = 0; a < this.allprice.length; a++) {
        this.buyprice = this.buyprice + parseInt(this.allprice[a])
      }
      // console.log(this.buyprice, '买')
      if (this.moreclass.length !== 0) {
        const data = bugexem({
          userid: this.id,
          testpaperid: this.select.toString(),
          gobuyprice: parseInt(this.buyprice)
        })
        console.log(data)
        this.reload()
      } else {
        alert('请先选课')
      }
    },
    appear () {
      this.isappear = !this.isappear
    },
    // 改变顺序进行查询
    async  changenumber (i) {
      console.log(i)
      if (i === 0) {
        i = 1
      }
      this.onetype = i
      this.newlist = []
      this.exemList = []
      this.newpage = 1
      const data = await buyExemed({
        userid: this.id,
        page: this.newpage,
        ordertype: this.onetype
      })
      console.log(data.data.allbuytestpaper.data)
      this.newlist.push(...data.data.allbuytestpaper.data)
      this.exemList = [...new Set(this.newList)]
      console.log(this.exemList)
      this.newloading = false
      if (this.newpage < data.data.allbuytestpaper.last_page) {
        this.newpage++
        this.newonLoad()
      }
      if (this.exemList.length >= data.data.allbuytestpaper.total) {
        this.newfinished = true
      }
    },
    async xxx () {
      const data = await allExem({
        userid: this.id,
        comboname: this.value,
        grade: this.grade,
        page: this.searchpage
      })
      this.newloadList.push(...data.data.alltestpaper.data)
      this.allexemList = [...new Set(this.newloadList)]
      if (this.searchpage < data.data.alltestpaper.last_page) {
        console.log(this.searchpage)
        this.searchpage++
        this.xxx()
      }
      if (this.allexemList.length >= data.data.alltestpaper.total) {
        this.finished = true
      }
      this.$toast.clear()
    },
    // yyy函数用作获取购买过的课时
    async yyy () {
      const data = await buyExemed({
        userid: this.id,
        testpapername: this.newvalue,
        page: this.boughtpage
      })
      this.boughtlist.push(...data.data.allbuytestpaper.data)
      this.exemList = [...new Set(this.boughtlist)]
      if (this.boughtpage < data.data.allbuytestpaper.last_page) {
        this.boughtpage++
        this.yyy()
      }
      if (this.exemList.length >= data.data.allbuytestpaper.total) {
        this.finished = true
      }
      this.$toast.clear()
    }
  }
}
</script>

<style scoped lang='less'>
.gong {
  text-align: center;
  .gong_tu img {
    width: 260px;
    height: 260px;
  }
  .gong_zi span {
    font-size: 14px;
  }
}
.da {
  margin-left: 4%;
  margin-right: 4%;
  box-shadow: 0px 0px 10px #ccc;
  margin-bottom: 20px;
}
.price {
font-size: 12px;
}
.box {
  padding: 20px;
}
.van-grid-item__content--center {
  margin: 20px;
}
.van-grid-item__content {
  position: relative;
  padding: 10px;
  padding-bottom: 50px;
}
.bao{
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.search{
  flex: 5;
  margin-left: 10px;
}
.xiala{
  flex: 3;
  margin-left: 10px;
}
.morebuy{
  flex: 2;
  margin-left: 10px;
  height:63px;
  border-radius: 15px;
}
.abuy{
  display: flex;
  padding-top: 20px;
}
.buysell{
    font-size: 12px;
     text-align: right;
}
.atonce {
  position: fixed;
  top:85%;
  border-radius: 12px;
  width: 100%;
  text-align: center;
  z-index: 666;
  button {
    border-radius: 15px;
  }
}
.ddimg{
  width: 100%;
}
.zhong {
  text-align: center;
  font-size: 12px;
}
.doller{
  display: flex;
  justify-content: center;
  align-items: center;
}
.time{
  font-size: 12px;
  text-align: center;
}
</style>
